<template>
  <div class="link-main">    
    <div class="link-container-list">
      <!-- 提示文本 -->
      <el-row class="hint-area" v-if="currentCategoryLevel < 2">
        <el-col>
          <span class="pad-l-20">温馨提示：点击分类名称后可查看下级分类</span>
        </el-col>
      </el-row>
      <!-- 顶部搜索 -->
      <div class="mar-b-10">
        <el-input @keyup.enter.native="doSearch" v-model="searchListQuery.categoryName" clearable placeholder="请输入商品分类名称" style="width: 228px" class="mar-r-16"></el-input>
        <el-button class="group-b-left" type="primary" size="small" @click="doSearch">查询</el-button>
        <el-button class="group-b-right" size="small" @click="doResetSearch">重置</el-button>
      </div>
      <div v-if="currentCategoryLevel != 0" class="mar-b-10">
         <el-button plain size="small" @click="doBackCategory">返回上一级</el-button>
         <span class="font-red">当前列表内容为「</span>
         <span class="font-red">{{ currentCategoryLevel === 1 ? selectOneCategory.categoryName : selectTwoCategory.categoryName}}</span>
         <span class="font-red">」的{{ categoryLevelMap[currentCategoryLevel] }}级分类</span>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="categoryList" v-loading="listLoading" element-loading-text="加载中" style="width: 100%">
          <el-table-column label="分类名称" prop="categoryName">
            <template slot-scope="scope">
              <div v-if="scope.row.categoryLevel < 3" @click="doNextCategory(scope.row)" class="font-blue cursor-p">
                {{ scope.row.categoryName }}
              </div>
              <div v-else>
                {{ scope.row.categoryName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="商品数" prop="goodsCount"></el-table-column>
          <el-table-column align="center" width="100px" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="doSelect(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>      
    </div>
    <!-- 列表分页 -->
    <div class="pagination-box">
      <div class="pagination">
        <el-pagination background 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]" 
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 分类模板 -->
    <el-dialog title="选择分类模板" :visible.sync="catTemplateVisible" :close-on-press-escape="true" width="1200px" :append-to-body="true">
      <component-category-template :showFlag="catTemplateVisible" :appType="appType" @close="doCloseCategoryTemplate"></component-category-template>
    </el-dialog>
  </div>
</template>

<script>
  import componentCategoryTemplate from './../ComponentCategoryTemplate'
  import { pageCategoryWithGoods } from '@/api/goods/enterpriseGoodsCategory'
  import { getCategoryTemplate } from '@/api/goods/categoryTemplate'

  export default {
    components: {
      componentCategoryTemplate
    },
    props: {
      // 应用类型 10：云店 11：批发 13：主播
      appType: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        // 查询条件
        searchListQuery: {
          enterpriseId: '',
          currentPage: 1,
          size: 10,
          categoryName: ''
        },
        // 分类等级map
        categoryLevelMap: {
          1: '二',
          2: '三'
        },
        total: null,
        listLoading: true,
        // 分类模板visible
        catTemplateVisible: false,
        // 当前分类等级
        currentCategoryLevel: 0,
        // 所选一级分类名称
        selectOneCategory: {},
        // 所选二级分类名称
        selectTwoCategory: {},
        // 分类集合
        categoryList: [],
        // 分类模板类型
        // 1、5支持一级分类
        // 2、3支持一、二级分类
        // 4支持一、二、三级分类
        templateType: 0
      }
    },
    // 初始化页面
    created() {
      this.currentCategoryLevel = 0
      this.initList()
      this.getTemplate()
    },
    mounted() {
    },
    methods: {
      // 初始化
      initList() {
        this.listLoading = true
        this.searchListQuery.appType = this.appType
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        const level = this.currentCategoryLevel
        switch (level) {
          case 0:
            this.searchListQuery.parentId = ''
            break
          case 1:
            this.searchListQuery.parentId = this.selectOneCategory.enterpriseCategoryId
            break
          case 2:
            this.searchListQuery.parentId = this.selectTwoCategory.enterpriseCategoryId
            break
          default:
        }
        pageCategoryWithGoods(this.searchListQuery).then(response => {
          this.total = response.data.total
          this.categoryList = response.data.records
          this.listLoading = false
        })
      },
      // 获取分类模板数据
      getTemplate() {
        getCategoryTemplate(this.getEnterpriseId(), this.appType).then(response => {
          if (response.data && response.data.templateType) {
            this.templateType = response.data.templateType
          }
        })
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.searchListQuery = originData.searchListQuery
        this.doSearch()
      },
      // 跳转下级分类事件
      doNextCategory(row) {
        this.currentCategoryLevel = row.categoryLevel
        if (row.categoryLevel === 1) {
          this.selectOneCategory = row
        } else if (row.categoryLevel === 2) {
          this.selectTwoCategory = row
        }
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 返回上一级事件
      doBackCategory() {
        this.currentCategoryLevel--
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 选择事件
      doSelect(row) {
        // 当前选择分类等级
        const selectedLevel = this.currentCategoryLevel + 1
        let result = false
        if (this.appType === 13) {
          // 主播小程序不校验分类模板
          result = true
        } else {
          // 1、5支持一级分类
          // 2、3支持一、二级分类
          // 4支持一、二、三级分类
          switch (this.templateType) {
            default:
            case 1:
            case 5:
              if (selectedLevel < 2) {
                result = true
              }
              break
            case 2:
            case 3:
              if (selectedLevel < 3) {
                result = true
              }
              break
            case 4:
              if (selectedLevel < 4) {
                result = true
              }
              break
          }
        }
        if (result) {
          let oneCategoryObj = {}
          let twoCategoryObj = {}
          let threeCategoryObj = {}
          switch (selectedLevel) {
            default:
            case 1:
              oneCategoryObj = row
              break
            case 2:
              oneCategoryObj = this.selectOneCategory
              twoCategoryObj = row
              break
            case 3:
              oneCategoryObj = this.selectOneCategory
              twoCategoryObj = this.selectTwoCategory
              threeCategoryObj = row
              break
          }
          this.$emit('selectCategory', oneCategoryObj, twoCategoryObj, threeCategoryObj, this.appType)
        } else {
          this.$confirm('当前分类模板不支持该选择是否立即更换分类模板？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.catTemplateVisible = true
          }).catch(() => {
          })
        }
      },
      // 分类模板dialog关闭事件
      doCloseCategoryTemplate(refreshFlag) {
        this.catTemplateVisible = false
        if (refreshFlag) {
          this.getTemplate()
        }
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-avatar {
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
  .category-style {
    color: #3abbdb
  }
  .link-container-list {
    margin-right: 20px;
    height: 440px;
    overflow: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      width: 4px;    
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: rgba(0,0,0,0.2);
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 0;
      background: rgba(0,0,0,0.1);
      }
  }
  .pagination-box {
    position: relative;
    z-index: 20;
  }
  .pagination {
    position: absolute;
    right: 20px;
    top: 0px;
    width: 100%;
    z-index: 3000;
  }
  .hint-area {
    background-color: #fdf8c8; 
    padding: 10px 0;
    margin-bottom: 10px;
  }
</style>
